<template>
  <div class="items">
    <van-search v-model="value" placeholder="请输入搜索关键词" />
    <div class="main">
      <div class="list">
        <span
          v-for="(item, index) in items.categoryList"
          :key="item.id"
          :class="currentIndex === index ? 'name' : ''"
          @click="toggle(index, item.id)"
        >
          {{ item.name }}
        </span>
      </div>
      <div class="content">
        <div class="img">
          <img :src="items.currentCategory.picUrl" />
          <i>{{ items.currentCategory.desc }}</i>
        </div>
        <div class="item">
          <div
            class="sub"
            v-for="item in items.currentSubCategory"
            :key="item.id"
          >
            <img :src="item.picUrl" />
            <i>{{ item.name }}</i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useItemsStore } from '../../stores/index'
import { onMounted, ref } from 'vue'

//整个数据
let items = useItemsStore()
onMounted(async () => {
  await items.fetchGetItems()
  // console.log(items.currentCategory)
})

//搜索
let value = ref('')

//索引高亮,  切换
let currentIndex = ref(0)
const toggle = (index, id) => {
  currentIndex.value = index
  items.change(id)
}
</script>

<style scoped>
.items {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 auto;
  /* border: 1px solid #000; */
}
.main {
  width: 100%;
  display: flex;
  /* gap: 10px; */
}
.list {
  width: 20%;
  display: flex;
  flex-direction: column;
  /* border: 1px solid #000; */
}
.list span {
  /* display: block; */
  padding: 5px 15px;
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #e5e5e5;
}
.name {
  color: #db3d3c;
  border-left: 3px solid #db3d3c;
} 
.content {
  width: 80%;
  display: flex;
  flex-direction: column;
  /* border: 1px solid #000; */
}
.img {
  /* border: 1px solid #000; */
  text-align: center;
  font-size: 14px;
}
.img img {
  width: 100%;
  object-fit: cover;
  /* border: 1px solid #000; */
}
.img i {
  /* margin: auto; */
  /* border: 1px solid #000; */
}
.item {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* border: 1px solid red; */
}
.sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* border: 1px solid #000; */
}
.sub img {
  width: 80%;
  height: 80%;
}
.sub i{
  font-size: 14px;
}
</style>
